import { Options, Vue } from 'vue-class-component';
import { User, Lock } from '@element-plus/icons';
import { notification } from 'ant-design-vue';
import './app-login.less';

@Options({})
export default class AppLogin extends Vue {
    /**
     * 表单
     *
     * @type {*}
     * @memberof AppLogin
     */
    formData: any = {
        username: '',
        password: '',
    };

    async created() {
        window.addEventListener('keydown', this.keyDown);
    }

    keyDown(e: any) {
        if (e.keyCode === 13) {
            this.login();
        }
    }

    /**
     * 表单项
     *
     * @type {any[]}
     * @memberof AppLogin
     */
    formDetails: any[] = [
        {
            prop: 'username',
            label: '用户名',
            rules: [
                {
                    required: true,
                    message: '请输入用户名！',
                    trigger: 'blur',
                },
            ],
            icon: User,
            type: 'input',
        },
        {
            prop: 'password',
            label: '密码',
            rules: [
                {
                    required: true,
                    message: '请输入密码！',
                    trigger: 'blur',
                },
            ],
            icon: Lock,
            type: 'password',
        },
    ];

    /**
     * 登录
     *
     * @memberof AppLogin
     */
    login() {
        const form: any = this.$refs.form;
        form.validate((valid: any) => {
            if (valid) {
                if (this.formData.username === 'admin' && this.formData.password === 'monitor') {
                    this.$router.push('/dashboard/analysis');
                } else {
                    notification.error({
                        message: "用户名或密码错误"
                    });
                }
            } else {
                return false;
            }
        });
    }

    render() {
        return (
            <div class='app-login'>
                <div class='container'>
                    <div class='header'>
                        <div class='title'>
                            <span class='logo'>{this.renderLogo()}</span>
                            <h1>Data Monitor</h1>
                        </div>
                        <div class='sub-title'>Data Monitor 数据监测系统，用于监测数据实时变化</div>
                    </div>
                    <div class='content'>
                        <el-form ref='form' model={this.formData}>
                            {this.formDetails.map((item: any) => {
                                return (
                                    <el-form-item prop={item.prop} rules={item.rules}>
                                        <el-input
                                            type={item.type}
                                            v-model={this.formData[item.prop]}
                                            placeholder={`请输入${item.label}`}
                                            prefix-icon={item.icon}
                                        ></el-input>
                                    </el-form-item>
                                );
                            })}
                            <a-button
                                type='primary'
                                onClick={this.login}
                            >
                                登录
                            </a-button>
                        </el-form>
                    </div>
                    <div class='footer'>Data Monitor 数据监测</div>
                </div>
            </div>
        );
    }

    /**
     * 绘制logo
     *
     * @return {*}
     * @memberof AppLogin
     */
    renderLogo() {
        return <img src='/assets/svg/cdp-data.svg'></img>;
    }
}
